﻿
@page "/rich-text-editor/overview"

@using Syncfusion.Blazor.RichTextEditor

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a href="https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap4">Blazor Rich Text Editor example</a> demonstrates the full features of Rich Text Editor that includes all the tools and functionalities.</p>
</SampleDescription>
<ActionDescription>
    <p>The editor’s toolbar contains commands to format the content. The toolbar consists of:</p>
    <ul>
        <li><code>Lists</code> - NumberFormat list and BulletFormat list types.</li>
        <li><code>Links</code> - A hyperlink can be inserted into the editor for quick access to related information.</li>
        <li><code>Image</code> - Inserts and manages images.</li>
        <li><code>Table</code> - Inserts and manages Tables.</li>
        <li><code>Alignment</code> - Aligns the content with left, center, and right margins.</li>
        <li><code>Undo/Redo</code> - Allows undo/redo operations.</li>
        <li><code>Indent/ Outdent</code> - Increases/decreases the indent level of the content.</li>
        <li><code>Font</code> - Able to do styling on text like font family, size, fore color and background color.</li>
        <li><code>Lower / Upper case</code> – Changes the casing of the selected text.</li>
        <li><code>SubScript / SuperScript</code> - Makes the selected text as subscript (lower)/superscript(upper).</li>
        <li><code>Format</code> – Formats the sentence in different ways such as heading level, quotation, and code snippet</li>
        <li><code>Styles</code> – Allows you to apply inline styles to the selected content like bold, italic, and more.</li>
    </ul>
</ActionDescription>

<div class="control-section">
    <div class="control-wrapper">
        <div class="control-section">
            <SfRichTextEditor ShowCharCount="true" MaxLength="2000" AutoSaveOnIdle="true">
                <p>
                    The Rich Text Editor is a WYSIWYG ('what you see is what you get') editor useful to create and edit content and return the valid
                    <a href='https://blazor.syncfusion.com/documentation/rich-text-editor/editor-modes/#html-editor'>HTML markup</a> or
                    <a href='https://blazor.syncfusion.com/documentation/rich-text-editor/editor-modes/#markdown-editor'>markdown</a> of the content
                </p>
                <b>Toolbar</b>
                <ol>
                    <li>The Toolbar contains commands to align the text, insert a link, insert an image, insert list, undo/redo operations, HTML view, etc </li>
                    <li>The Toolbar is fully customizable </li>
                </ol><b>Links</b><ol>
                    <li> You can insert a hyperlink with its corresponding dialog</li>
                    <li> Attach a hyperlink to the displayed text. </li>
                    <li> Customize the quick toolbar based on the hyperlink </li>
                </ol>
                <b>Image.</b>
                <ol>
                    <li> Allows you to insert images from an online source as well as the local computer.</li>
                    <li> You can upload an image.</li>
                    <li> Provides an option to customize the quick toolbar for an image. </li>
                </ol>
                <img alt='Logo' src='images/rich-text-editor/rte-image-feather.png' style='width: 300px' />
                <RichTextEditorToolbarSettings Items="@Tools" />
            </SfRichTextEditor>
        </div>
    </div>
</div>

<style>
    .e-code-mirror::before {
        content: '\e345';
    }

    .e-html-preview::before {
        content: '\e350';
    }

    .CodeMirror-linenumber,
    .CodeMirror-gutters {
        display: none;
    }

    .sb-header {
        z-index: 100;
    }
</style>

@code {
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
        new ToolbarItemModel() { Command = ToolbarCommand.FontName },
        new ToolbarItemModel() { Command = ToolbarCommand.FontSize },
        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
        new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
        new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
        new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList },
        new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList },
        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
        new ToolbarItemModel() { Command = ToolbarCommand.Print },
        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
    };
}